<template>
	<keep-alive>
	<div>
		<!-- 刷新 -->
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">

			<!-- 搜索 -->
			<router-link to="/seek">
				<van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
			</router-link> |
			<van-tabs v-model="active_cate_id" @click="swichTab">
				<van-tab v-for="item in cate" :key="item._id" :title="item.name">
				</van-tab>
			</van-tabs>
			<!-- 轮播 -->
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item><img src="../../public/bann.jpg"></van-swipe-item>
				<van-swipe-item><img src="../../public/banner3.jpg"></van-swipe-item>
				<van-swipe-item><img src="../../public/banner4.jpg"></van-swipe-item>
				<van-swipe-item><img src="../../public/banner2.jpg"></van-swipe-item>
			</van-swipe>
			<!-- 内容 -->
			<div class="ban" v-for="(item,index) in articleList" :key="item._id">
				<!-- <van-grid>
						<van-grid-item icon="photo-o" text="文字" />
						<van-grid-item icon="photo-o" text="文字" />
						<van-grid-item icon="photo-o" text="文字" />
						<van-grid-item icon="photo-o" text="文字" />
					</van-grid> -->
				<!-- 内容 -->
				<div>
					<div class="forum">
						<!-- <div class="black">
							<img :src="item.imageSrc" />
						</div> -->
						<div class="right">
							<p>{{item.author}}</p>
							<h3>{{item.title}}</h3>
						</div>
					</div>

					<div class="inm">
						<img :src="item.imageSrc" />
						<!-- <img src="../../public/a1.jpg">
							<img src="../../public/a12.jpg">
							<img src="../../public/a2.jpg">
							<img src="../../public/a6.jpg"> -->
					</div>
					<div class="nickname">
						<span>{{item.author}}(8小时前)</span>
					</div>
					<div class="quan">
					</div>
				</div>
			</div>
			<div class="kuan" style="width: 100%; height: 100px;">
			</div>
		</van-pull-refresh>
		<!-- 底部 -->
		<van-tabbar v-model="activel">
			<van-tabbar-item to="/">
				<span>首页</span>
				<template #icon="props">
					<img :src="props.active ? icon.active : icon.inactive" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/publish" icon="search">发布</van-tabbar-item>
			<van-tabbar-item to="/my" icon="setting-o">我的</van-tabbar-item>
		</van-tabbar>
	</div>
	</keep-alive>
</template>

<script type="text/javascript">
	import {
		Search
	} from 'vant';
	import {
		PullRefresh
	} from 'vant';
	import {
		Toast
	} from 'vant';
	import {
		Tabbar,
		TabbarItem
	} from 'vant';
	import {
		Swipe,
		SwipeItem
	} from 'vant';
	import {
		Tab,
		Tabs
	} from 'vant';
	import {
		Grid,
		GridItem
	} from 'vant';
	import {
		getCateList,
		getArticleList
	} from '@/api/home.js';

	export default {
		components: {
			[Search.name]: Search,
			[PullRefresh.name]: PullRefresh,
			[Toast.name]: Toast,
			[Tabbar.name]: Tabbar,
			[TabbarItem.name]: TabbarItem,
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[Grid.name]: Grid,
			[GridItem.name]: GridItem,
		},
		data() {

			return {
				articleList: [],
				active_cate_id: '',
				cate: [],
				value: "",
				count: 0,
				isLoading: false,
				active: 0,
				activel: 0,
				activeName: 'a',
				name: '',
				icon: {
					active: 'https://img01.yzcdn.cn/vant/user-active.png',
					inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
				},
			};
		},
		mounted() {
			this.getCate()
		},
		methods: {
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
					// this.count++;
				}, 1000);
			},

			getCate() {
				getCateList().then(res => {
					console.log(res)
					this.cate = res.data.data;
					//获取到分类数据去取第一个栏目的id
					this.active_cate_id = this.cate[this.active]._id;
					this.getArtLise();
				})
			},
			//获取文章列表
			getArtLise() {
				this.$http.post('/api/get_article_list', {
					cate_id: this.active_cate_id
				}).then(res => {
					console.log(res);
					this.articleList = res.data.data;
				})
			},
			swichTab() {
				this.active_cate_id = cate_id;
				this.getArticleList();

			}
		}
	}
</script>


<style lang="less">
	.my-swipe {
		text-align: center;
	}

	.my-swipe .van-swipe-item img {
		width: 350px;
		height: 180px;
		border-radius: 15px;
		margin-top: 10px;
		text-align: center;
	}

	.forum {
		width: 3375px;
		height: 85px;
	}

	.forum .black {
		width: 65px;
		height: 85px;
		float: left;
	}

	.forum .black img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		border: 2px solid #ffb129;
		margin: 20px 10px;
	}

	.right {
		float: left;
		width: 295px;
		height: 65px;
		margin-left: 10px;
	}

	.forum .right p {
		margin-top: 10px;
		color: #e79a00;
		font-size: 26px;
		line-height: 40px;
		text-align: left;
		font-weight: 600;
	}

	.forum .right h3 {
		color: #000000;
		font-size: 16px;
		line-height: 40px;
		text-align: left;
	}

	.inm {
		width: 375px;
		height: 120px;
		overflow: hidden;
	}

	.inm img {
		width: 110px;
		height: 110px;
		float: left;
		padding: 7px;
	}


	.nickname span {
		float: right;
		margin-right: 20px;
		margin-top: 10px;
		font-size: 18px;
		font-weight: 500;
	}

	.quan {
		padding: 2px;
		border-bottom: 1.5px solid #d9dbdd;
		width: 350px;
		margin: 0 auto;
		padding-top: 45px;
	}

	.kuan {
		width: 100%;
		height: 100px;
	}
</style>
